<template>
	<div class>
		<picker mode="multiSelector" @change="morechange" @cancel="underlinecancle"
			@columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray" :range-key="'name'">
			<slot name='info'>
			</slot>
		</picker>
		</view>
	</div>
</template>
<script>
	import {
		getCommonArea
	} from '@/utils/getRequest.js'
	export default {
		name: "cityOptions",
		// model:{
		//   prop:'active',
		//   event:'change'
		// },
		props: {
			active: {
				type: [Array, String],
				defalut: []
			},
		},
		data() {
			return {
				activeSon: [],
				activeValue: '',
				multiIndex: [0, 0, 0],
				site: true,
				first: false,
				multiArray: [
					[
						[]
					],
					[
						[]
					],
					[
						[]
					]
				],
			};
		},
		watch:{
			active(x){
				if(x  && x.length > 0 && this.activeSon && this.activeSon.length > 0 && this.activeSon.filter(c=>  this.activeSon.indexOf(c)!= -1).length == 3) return
				// if(this.activeSon == x || !this.activeSon || this.activeSon.length == 0 ) return
				this.activeSon = x
				this.getInfo()
			}
		},
		created() {
			this.activeSon = this.active
			this.getInfo()
		},
		methods: {
			async getInfo() {
				await this.province();
				if (this.active && this.active.length > 0) {
					this.first = true
					this.site = true
					this.multiArray[0].forEach((it, ind) => {
						if (it.id == this.activeSon[0]) {
							this.$set(this.multiIndex, this.multiIndex[0], ind)
							setTimeout(rs => {
								this.city(this.multiArray[0][this.multiIndex[0]].id)
							})
						}
					})
				} else {
					this.site = false
				}
			},
			// 地址的 change
			morechange() {
				this.site = false
				this.activeValue = this.multiArray[0][this.multiIndex[0]].name + ' ' + this.multiArray[1][this.multiIndex[
					1]].name + ' ' + this.multiArray[2][this.multiIndex[2]].name
				var code = [this.multiArray[0][this.multiIndex[0]].id, this.multiArray[1][this.multiIndex[1]].id, this
					.multiArray[2][this.multiIndex[2]].id
				]
				this.$emit('change', {
					code: code,
					name: this.activeValue
				})
				this.$forceUpdate()
			},
			underlinecancle() {
				if (this.site == true) this.site = true
			},
			// 地址 自定义滚动选择器 某一列的值改变时触发 columnchange 事件
			bindMultiPickerColumnChange(e) {
				this.site = false
				this.$set(this.multiIndex, e.detail.column, e.detail.value)
				if (e.detail.column == 0) {
					this.multiIndex[1] = 0
					this.multiIndex[2] = 0
					this.city(this.multiArray[e.detail.column][e.detail.value].id)
				} else if (e.detail.column + '' == '1') {
					this.multiIndex[2] = 0
					this.area(this.multiArray[e.detail.column][e.detail.value].id)
				}
			},
			// 地址 省
			async province() {
				let that = this
				try {
					var res = await getCommonArea({type:1})
					this.multiArray[0] = res
					if (this.activeSon && this.activeSon[0]) {
						if (res.findIndex(c => c.id == this.activeSon[0]) != -1) {
							this.multiIndex[0] = res.findIndex(c => c.id == this.activeSon[0])
							this.city(res[this.multiIndex[0]].id)
						} else {
							this.multiIndex[0] = 0
							this.city(res[this.multiIndex[0]].id)
						}
					} else {
						this.multiIndex[0] = 0
						this.city(res[this.multiIndex[0]].id)
					}
				} catch {
					// that.province()
				}
			},
			// 市
			async city(val) {
				let that = this
				try {
					var res = await getCommonArea({
						id: val,
						type:2
					})
					this.$set(this.multiArray, 1, res)
					this.multiArray[1] = res
					if (this.activeSon && this.activeSon[1]) {
						if (res.findIndex(c => c.id == this.activeSon[1]) != -1) {
							this.multiIndex[1] = res.findIndex(c => c.id == this.activeSon[1])
							this.area(res[this.multiIndex[1]].id)
						} else {
							this.multiIndex[1] = 0
							this.area(res[this.multiIndex[1]].id)
						}
					} else {
						this.multiIndex[1] = 0
						this.area(res[this.multiIndex[1]].id)
					}
				} catch {
					// that.city(val)
				}
			},
			// 区
			async area(val) {
				let that = this
				try {
					var res = await getCommonArea({
						id: val,
						type:1
					})
					this.$set(this.multiArray, 2, res)
					this.multiArray[2] = res
					if (this.activeSon[2]) {
						if (this.activeSon && this.activeSon[2]) {
							if (res.findIndex(c => c.id == this.activeSon[2]) != -1) {
								this.multiIndex[2] = res.findIndex(c => c.id == this.activeSon[2])
							} else {
								this.multiIndex[2] = 0
								// this.area(res[this.multiIndex[2]].id)
							}
						} else {
							this.multiIndex[2] = 0
							// this.area(res[this.multiIndex[2]].id)
						}
					}
					if (this.first) {
						this.morechange()
					}
				} catch {
				
			}
			},
		}
	};
</script>
<style lang="scss" scoped>
	.right_box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;

		.row1 {
			.icon {
				vertical-align: middle;
			}

			margin-right: 40rpx;

			&:last-child {
				margin: 0;
			}
		}
	}

	text {
		margin-left: 16rpx;
		font-size: #333;
	}

	.text2 {
		color: #999;
	}

	.right_box2 {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		text {
			text-align: left;
			width: calc(100% - 40rpx);
			display: inline-block;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin: 0;
		}

		image {
			width: 16rpx;
			height: 16rpx;
		}
	}
</style>
